<template>
  <div class="wrap">

    <SkyCardPanel title="对话框">
      <div slot="main">
        <div class="block">
          默认按钮

          <sky-button @click="DialogShow1=true">小对话框</sky-button> <span></span>
          <sky-button @click="DialogShow2=true">中对话框</sky-button> <span></span>
          <sky-button @click="DialogShow3=true">大对话框</sky-button> <span></span>
          <sky-button @click="DialogShow4=true">全屏对话框</sky-button> <span></span>
          <sky-button @click="DialogShow5=true">自定义宽高</sky-button> <span></span>
        </div>
      </div>
    </SkyCardPanel>

    <sky-dialog :DialogShow.sync="DialogShow1" title="小型弹框" size="small">
      <div slot="body" class="sky-dialog-body">
        <div v-for="item in 20">内容......</div>
      </div>
      <div slot="footer" class="sky-dialog-footer">
        <sky-button type="secondary" @click="DialogShow1=false">取消</sky-button>
        <sky-button type="primary" @click="DialogShow1=false">提交</sky-button>
      </div>
    </sky-dialog>

    <sky-dialog :DialogShow.sync="DialogShow2" title="中型弹框" size="middle">
      <div slot="body" class="sky-dialog-body">
        <div v-for="item in 30">内容......</div>
      </div>
      <div slot="footer" class="sky-dialog-footer">
        <sky-button type="secondary" @click="DialogShow2=false">取消</sky-button>
        <sky-button type="primary" @click="DialogShow2=false">提交</sky-button>
      </div>
    </sky-dialog>

    <sky-dialog :DialogShow.sync="DialogShow3" title="大型弹框" size="big">
      <div slot="body" class="sky-dialog-body">
        <div v-for="item in 50">内容......</div>
      </div>
      <div slot="footer" class="sky-dialog-footer">
        <sky-button type="secondary" @click="DialogShow3=false">取消</sky-button>
        <sky-button type="primary" @click="DialogShow3=false">提交</sky-button>
      </div>
    </sky-dialog>

    <sky-dialog :DialogShow.sync="DialogShow4" title="全屏弹框" size="fullscreen">
      <div slot="body" class="sky-dialog-body">
        <div v-for="item in 50">内容......</div>
      </div>
      <div slot="footer" class="sky-dialog-footer">
        <sky-button type="secondary" @click="DialogShow4=false">取消</sky-button>
        <sky-button type="primary" @click="DialogShow4=false">提交</sky-button>
      </div>
    </sky-dialog>
    <sky-dialog :DialogShow.sync="DialogShow5" title="自定义宽高" size="auto" dialogWidth="400" dialogHeight="300">
      <div slot="body" class="sky-dialog-body">
        <div v-for="item in 50">内容......</div>
      </div>
      <div slot="footer" class="sky-dialog-footer">
        <sky-button type="secondary" @click="DialogShow5=false">取消</sky-button>
        <sky-button type="primary" @click="DialogShow5=false">提交</sky-button>
      </div>
    </sky-dialog>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              
              //小型对话框
              &lt;sky-dialog :DialogShow.sync="DialogShow1" title="小型弹框" size="small"&gt;
                &lt;div slot="body" class="sky-dialog-body"&gt;
                  &lt;div&gt;内容&lt;/div&gt;
                &lt;/div&gt;
                &lt;div slot="footer" class="sky-dialog-footer"&gt;
                  &lt;sky-button type="secondary" @click="DialogShow1=false"&gt;取消&lt;/sky-button&gt;
                  &lt;sky-button type="primary" @click="DialogShow1=false"&gt;提交&lt;/sky-button&gt;
                &lt;/div&gt;
              &lt;/sky-dialog&gt;

              //中型对话框
              &lt;sky-dialog :DialogShow.sync="DialogShow2" title="中型弹框" size="middle"&gt;
                &lt;div slot="body" class="sky-dialog-body"&gt;
                  内容
                &lt;/div&gt;
                &lt;div slot="footer" class="sky-dialog-footer"&gt;
                  &lt;sky-button type="secondary" @click="DialogShow2=false"&gt;取消&lt;/sky-button&gt;
                  &lt;sky-button type="primary" @click="DialogShow2=false"&gt;提交&lt;/sky-button&gt;
                &lt;/div&gt;
              &lt;/sky-dialog&gt;

              //大型对话框
              &lt;sky-dialog :DialogShow.sync="DialogShow3" title="大型弹框" size="big"&gt;
                &lt;div slot="body" class="sky-dialog-body"&gt;
                  内容
                &lt;/div&gt;
                &lt;div slot="footer" class="sky-dialog-footer"&gt;
                  &lt;sky-button type="secondary" @click="DialogShow3=false"&gt;取消&lt;/sky-button&gt;
                  &lt;sky-button type="primary" @click="DialogShow3=false"&gt;提交&lt;/sky-button&gt;
                &lt;/div&gt;
              &lt;/sky-dialog&gt;

              //全屏对话框
              &lt;sky-dialog :DialogShow.sync="DialogShow4" title="全屏弹框" size="fullscreen"&gt;
                &lt;div slot="body" class="sky-dialog-body"&gt;
                  内容
                &lt;/div&gt;
                &lt;div slot="footer" class="sky-dialog-footer"&gt;
                  &lt;sky-button type="secondary" @click="DialogShow4=false"&gt;取消&lt;/sky-button&gt;
                  &lt;sky-button type="primary" @click="DialogShow4=false"&gt;提交&lt;/sky-button&gt;
                &lt;/div&gt;
              &lt;/sky-dialog&gt;
              //
              &lt;sky-dialog :DialogShow.sync="DialogShow5" title="自定义宽高" size="auto" dialogWidth="400" dialogHeight="300"&gt;
                &lt;div slot="body" class="sky-dialog-body"&gt;
                  内容
                &lt;/div&gt;
                &lt;div slot="footer" class="sky-dialog-footer"&gt;
                  &lt;sky-button type="secondary" @click="DialogShow5=false"&gt;取消&lt;/sky-button&gt;
                  &lt;sky-button type="primary" @click="DialogShow5=false"&gt;提交&lt;/sky-button&gt;
                &lt;/div&gt;
              &lt;/sky-dialog&gt;
              
          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              
              //对话框
              export default {
                data () {
                  return {
                    DialogShow1: false,
                    DialogShow2: false,
                    DialogShow3: false,
                    DialogShow4: false,
                    DialogShow5: false,
                  }
                }
              }
              
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

  </div>
</template>

<script>
  export default {
    data () {
      return {
        DialogShow1: false,
        DialogShow2: false,
        DialogShow3: false,
        DialogShow4: false,
        DialogShow5: false
      }
    }
  }
</script>

<style lang="scss" scoped>
.wrap {
}
</style>